<template>
  <!-- <a-space direction="vertical"> -->
  <div ref="root">
    <a-date-picker v-model:value="value1"></a-date-picker>
    <a-date-picker v-model:value="value2" disabled picker="month"></a-date-picker>
    <a-range-picker v-model:value="value3" disabled></a-range-picker>
    <a-range-picker v-model:value="value4"></a-range-picker>
    <a-switch v-model:checked="checked" />
    <div></div>
    <a-dropdown>
      <a class="ant-dropdown-link" @click.prevent>
        Hover me
        <down-outlined />
        <!-- <DownOutlined /> -->
      </a>
      <template #overlay>
        <a-menu>
          <a-menu-item>
            <a href="javascript:;">1st menu item</a>
          </a-menu-item>
          <a-menu-item>
            <a href="javascript:;">2nd menu item</a>
          </a-menu-item>
          <a-menu-item>
            <a href="javascript:;">3rd menu item</a>
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
    <a-button type="primary" @click="changeShow">Open Modal</a-button>
    <dialogM v-model:visibleShow="visibleShow" :list="treeData" @setForm="setForm" :setData="setData"></dialogM>
    <div>name:{{ obj.name }}</div>
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="1" tab="Tab 1">Content of Tab Pane 1</a-tab-pane>
      <a-tab-pane key="2" tab="Tab 2" force-render>Content of Tab Pane 2</a-tab-pane>
      <a-tab-pane key="3" tab="Tab 3">Content of Tab Pane 3</a-tab-pane>
    </a-tabs>
    <baseAss ref="base" :tab="activeKey"></baseAss>
    <!-- <test-provide></test-provide> -->
    <testProvide ref="baseP"></testProvide>
  </div>
  <!-- </a-space> -->
</template>
<script>
import dayjs from 'dayjs';
import { DownOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref, reactive, provide, getCurrentInstance, onMounted } from 'vue';
import dialogM from '../components/dialogM'
import baseAss from "../components/baseAss"
import testProvide from '@/components/testProvide.vue';
export default defineComponent({
  components: { DownOutlined, dialogM, baseAss, testProvide },
  setup() {
    const checked = ref(false);
    const dateFormat = 'YYYY-MM-DD';
    const visibleShow = ref(false)
    const obj = ref({
      name: "小红"
    })
    const changeShow = () => {
      obj.value = {
        name: 889
      }
      visibleShow.value = true
    }
    const treeData = reactive([
      {
        title: '频道',
        key: '1',
        level: 1,
        children: [
          {
            title: '折上折频道页',
            key: '10',
            level: 2,
            children: [{
              key: "20"
            }, {
              key: 10,
            }],
          },
        ],
      },
      {
        title: '活动',
        key: '2',
        level: 1,
        children: [
          {
            title: '活动配置',
            key: '20',
            level: 2,
            children: [],
          },
        ],
      },
    ])
    const handerDel = (list, id) => {
      list = list.filter(res => res.key != id)
      list.map(item => {
        if (item.children && item.children.length > 0) {
          item.children = handerDel(item.children, id)
        }
      })
      return list;
    }
    const handerUpdate = (list, id) => {

      list.map(item => {
        if (item.key == id) {
          item.title = "1111"
        }
        if (item.children && item.children.length > 0) {
          handerUpdate(item.children, id)
        }
      })
    }
    handerUpdate(treeData, "20")
    const activeKey = ref("1")
    const testKey = ref("1");
    provide("activeKey", testKey)
    const { proxy } = getCurrentInstance();
    const base = ref(null)
    onMounted(() => {
      console.log(proxy.refs, 1111)
    })
    const setData = ref(null)
    const setForm = form => {
      console.log(form)
      setData.value = form;
    }
    return {
      value1: ref(dayjs('2015-06-06', dateFormat)),
      value2: ref(dayjs('2015-06', 'YYYY-MM')),
      value3: ref([
        dayjs('2015-06-06', dateFormat),
        dayjs('2015-06-06', dateFormat),
      ]),
      value4: ref([
        dayjs('2019-09-03', dateFormat),
        dayjs('2019-11-22', dateFormat),
      ]),
      checked,
      visibleShow,
      changeShow,
      handerDel,
      handerUpdate,
      treeData,
      activeKey,
      base,
      obj,
      setForm,
      setData
    };
  },
});
</script>

